<div>
	<nz-spin [nzSpinning]="_isSpinning">
      	<form nz-form [formGroup]="validateForm" (ngSubmit)="_submitForm()">
	        <div class="">
		        <div nz-form-item nz-row>
		            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>模版名称：</div>
		            <div nz-form-control [nzValidateStatus]="validateForm.controls.name" nz-col [nzSm]="14" [nzXs]="24">
			            <nz-input 
			            	formControlName="name"
			                [nzPlaceHolder]="'请输入模版名称'"
			                [nzSize]="'large'" style="width:300px;"></nz-input>
			            <div nz-form-explain *ngIf="validateForm.controls.name.dirty&&validateForm.controls.name.hasError('required')">请输入模版名称</div>
		            </div>
		        </div>
		        <div nz-form-item nz-row>
		            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>产品所在地：</div>
		            <div nz-form-control [class.has-error]="placeError" nz-col [nzSm]="14" [nzXs]="24">
			            <city [(cityvalue)]="place"></city>
			            <div nz-form-explain *ngIf="placeError">请选择产品所在地</div>
		            </div>
		        </div>
		        <div nz-form-item nz-row>
		            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>配送方式：</div>
		           	<div nz-form-control [class.has-error]="validateForm.controls.checkOptionsOne.dirty&&validateForm.controls.checkOptionsOne.hasError('checkOptionsOne')" nz-col [nzSm]="14" [nzXs]="24">
			           	<nz-checkbox-group formControlName="checkOptionsOne"></nz-checkbox-group>
			           	<div nz-form-explain *ngIf="validateForm.controls.checkOptionsOne.dirty&&validateForm.controls.checkOptionsOne.hasError('checkOptionsOne')">请选择配送方式</div>
		            </div>
		        </div>
		        <div nz-form-item nz-row>
		            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>运费设置：</div>
		           	<div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
		           		<ng-container *ngFor="let item of validateForm.controls.checkOptionsOne.value">
				           	<div *ngIf="item.checked" class="mb-40">
					           	<nz-table [nzCustomNoResult]="true" >
									<thead nz-thead>
								        <tr>
								          	<th nz-th style="min-width:100px;"><span>{{item.label}}配送区域</span></th>
								          	<th nz-th ><span>首重（克）</span></th>
								          	<th nz-th ><span>首价（元）</span></th>
								          	<th nz-th ><span>续重（克）</span></th>
								          	<th nz-th><span>续价（元）</span></th>
								        </tr>
								    </thead>
								    <tbody nz-tbody>
								       	<tr nz-tbody-tr>
								       		<td>全国默认地区</td>
								       		<td>
								       			<div nz-form-control [nzValidateStatus]="validateForm.controls['value['+item.value+'][0][value1]']">
								       				<nz-input [formControlName]=" 'value['+item.value+'][0][value1]' " style="width:70px"></nz-input>
								       			</div>
								       		</td>
								       		<td>
								       			<div nz-form-control [nzValidateStatus]="validateForm.controls['value['+item.value+'][0][value2]']">
								       				<nz-input [formControlName]=" 'value['+item.value+'][0][value2]' " style="width:70px"></nz-input>
								       			</div>
								       		</td>
								       		<td>
								       			<div nz-form-control [nzValidateStatus]="validateForm.controls['value['+item.value+'][0][value3]']">
								       				<nz-input [formControlName]=" 'value['+item.value+'][0][value3]' " style="width:70px"></nz-input>
								       			</div>
								       		</td>
								       		<td>
								       			<div nz-form-control [nzValidateStatus]="validateForm.controls['value['+item.value+'][0][value4]']">
								       				<nz-input [formControlName]=" 'value['+item.value+'][0][value4]' " style="width:70px"></nz-input>
								       			</div>
								       		</td>
								       	</tr>
								       	<tr nz-tbody-tr *ngFor="let item1 of listArr[item.value];let i =index" >
								       		<td><span>{{item1.name}}</span> <a (click)="addrange(item.value,item1)"><i class="ml-5 anticon anticon-edit"></i></a></td>
								       		<td>
								       			<div nz-form-control [nzValidateStatus]="validateForm.controls['value['+item.value+']['+item1.index+'][value1]']">
								       				<nz-input [formControlName]=" 'value['+item.value+']['+item1.index+'][value1]' " style="width:70px" ></nz-input>
								       			</div>
								       		</td>
								       		<td>
								       			<div nz-form-control [nzValidateStatus]="validateForm.controls['value['+item.value+']['+item1.index+'][value2]']">
								       				<nz-input [formControlName]=" 'value['+item.value+']['+item1.index+'][value2]' " style="width:70px" ></nz-input>
								       			</div>
								       		</td>
								       		<td>
								       			<div nz-form-control [nzValidateStatus]="validateForm.controls['value['+item.value+']['+item1.index+'][value3]']">
								       				<nz-input [formControlName]=" 'value['+item.value+']['+item1.index+'][value3]' " style="width:70px" ></nz-input>
								       			</div>
								       		</td>
								       		<td>
								       			<div nz-form-control [nzValidateStatus]="validateForm.controls['value['+item.value+']['+item1.index+'][value4]']">
								       				<nz-input [formControlName]=" 'value['+item.value+']['+item1.index+'][value4]' " style="width:70px" ></nz-input>
								       				<a (click)="deleteitem(item.value,i,item1)" class="ml-5 anticon anticon-delete"></a>
								       			</div>
								       		</td>
								       	</tr>
								    </tbody>
								</nz-table>
								<div>
									<a (click)="addrange(item.value)"><i class="anticon anticon-plus-circle-o"></i><span class="ml-5">添加指定地区</span></a>
								</div>
								<div class="has-error" *ngIf="checkvalue(item.value)">
									<div nz-form-explain >请输入正确的运费设置</div>
								</div>
							</div>
						</ng-container>
		            </div>
		        </div>
		        <div nz-form-item nz-row>
		            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24"></div>
		           	<div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
			           	<button nz-button [nzType]="'primary'" [nzSize]="'large'">确定</button>
		            </div>
		        </div>
		    </div>
		</form>
	</nz-spin>
	<nz-modal [nzVisible]="isVisible" [nzTitle]="'添加收货地址'" [nzContent]="modalContent" (nzOnCancel)="handleCancel($event)" (nzOnOk)="handleOk($event)">
      	<ng-template #modalContent>
         	<div class="ant-transfer">
         		<div class="ant-transfer-list">
         			<div class="ant-transfer-list-header">
         				<label nz-checkbox [(ngModel)]="allChecked" (ngModelChange)="updateAllChecked()" [nzIndeterminate]="indeterminate">
				      	</label>
         			</div>
         			<div class="ant-transfer-list-body">
         				<nz-checkbox-group [(ngModel)]="rangeList" (ngModelChange)="changeChecked($event)" ></nz-checkbox-group>
         			</div>
         		</div>
         		<div class="ant-transfer-operation">
         			<button [disabled]="leftdisabled" nz-button (click)="chooseRange()" [nzType]="'primary'">
				      	<i class="anticon anticon-right"></i>
				    </button>
				    <button [disabled]="rightdisabled"  (click)="removeRange()" style="margin-top:10px;" nz-button [nzType]="'primary'">
				      	<i class="anticon anticon-left"></i>
				    </button>
         		</div>
         		<div class="ant-transfer-list">
         			<div class="ant-transfer-list-header">
         				<label nz-checkbox [(ngModel)]="allChecked1" (ngModelChange)="updateAllChecked1()" [nzIndeterminate]="indeterminate1">
				      	</label>
         			</div>
         			<div class="ant-transfer-list-body">
         				<nz-checkbox-group [(ngModel)]="rangeList1" (ngModelChange)="changeChecked1($event)"></nz-checkbox-group>
         			</div>
         		</div>
         	</div>
      	</ng-template>
    </nz-modal>
</div>